<template>
  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display:flex">
    <div style="width:200px;padding-left:30px; font-weight: bold; color: cornflowerblue ">餐厅管理系统</div>
    <div style="flex:1 "></div>
    <div style="width:100px ">

      <el-dropdown style=" margin-right: 10px">


        <el-avatar style="margin-left: 20px" :size="35" :src="this.avatar"></el-avatar>
        <div>
          <span v-if="name==null" class="el-dropdown-link" style="font-size: 14px " >
           请登录<i class="el-icon-arrow-down el-icon--right" >

          </i>
          </span>

          <span v-if="name!=null" class="el-dropdown-link" style="font-size: 14px ">欢迎 {{name}}
          </span>
        </div>
      <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item  @click="$router.push('/person')"  >个人信息</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出系统</el-dropdown-item>

          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>





  </div>
</template>

<script>
import axios from "axios";
import request from "../utils/request";

export default {
  name: "Header",
  data(){
    return{
      form:{},
      name:'',
      avatar:''



    }
 },
  created(){
    this.load()
  },
 methods:{
    load(){
     let name =  sessionStorage.getItem("user")
      this.name =JSON.parse(name).nickname//转成字符串
      this.avatar = JSON.parse(name).avatar
},
loginOut(){
      request.get("/user/loginOut").then(
          this.$router.push('/login'),
               sessionStorage.clear()
      )
}



 }
}
</script>

<style scoped>

</style>